<template>
  <div v-loading="loading">
    <el-collapse-transition>
      <div
        v-if="detail && !isShowRefundDetail"
        ref="printWcYOrderDetail"
        class="order-detail"
      >
        <div class="app-main-content-box">
          <div class="app-main-top-box">
            <div class="title">订单详情</div>
            <div class="no-print">
              <el-button-group>
                <!-- <el-button
                  v-if="
                    detail.order.orderStatus === 3 &&
                      (userInfo.shopId === 0 ||
                        userInfo.shopId === detail.order.shopInfo.shopId) &&
                      !$store.getters.banBtnList.includes('BTN_REFUND')
                  "
                  size="medium"
                  round
                  type="danger"
                  @click="openRefundOrder"
                >退款</el-button> -->
                <!-- <el-button size="medium" round @click="print">打印</el-button> -->
                <!-- <el-button size="medium" round @click="printTicket">云打印</el-button> -->
                <el-button
                  v-if="detail.order.orderStatus === 3"
                  size="medium"
                  round
                  @click="printTicket"
                  >打印小票</el-button
                >
                <el-button
                  v-if="detail.order.orderStatus === 3"
                  size="medium"
                  round
                  @click="openRefundOrder"
                  >取消订单</el-button
                >
                <el-button
                  v-if="
                    detail.order.orderTypeInt === 3 &&
                    detail.order.orderStatus === 10
                  "
                  type="primary"
                  size="medium"
                  round
                  @click="confirmDelivery()"
                  >确认送达</el-button
                >
              </el-button-group>
              <el-button size="medium" round @click="back">返回</el-button>
            </div>
          </div>

          <div>
            <!-- 订单信息 -->
            <div class="info-card-container clearfix">
              <div class="info-card-box fl">
                <div class="cell-item">
                  <div>订单时间：</div>
                  <div>{{ detail.order.createTime }}</div>
                </div>
                <div class="cell-item">
                  <div>订单号：</div>
                  <div>{{ detail.order.orderNo }}</div>
                </div>
                <div class="cell-item">
                  <div>会员手机：</div>
                  <div>{{ detail.order.phone || "-" }}</div>
                </div>
                <div class="cell-item">
                  <div>就餐人数：</div>
                  <div>{{ detail.order.dinersNum || "无" }}</div>
                </div>
                <div class="cell-item">
                  <div>支付方式：</div>
                  <div>{{ detail.order.payment || "无" }}</div>
                </div>
                <div class="cell-item">
                  <div>备注：</div>
                  <div>{{ detail.order.remark || "无" }}</div>
                </div>
              </div>
              <div class="info-card-box fl">
                <div class="cell-item" v-if="detail.order.orderTypeInt !== 3">
                  <div>取餐时间：</div>
                  <div>{{ detail.order.appointTime || "-" }}</div>
                </div>
                <div class="cell-item" v-if="detail.order.orderTypeInt !== 3">
                  <div>取餐号：</div>
                  <div>{{ detail.order.offlineNo || "-" }}</div>
                </div>
                <div class="cell-item" v-if="detail.order.orderTypeInt !== 3">
                  <div>桌台号：</div>
                  <div>{{ detail.order.tableNo || "-" }}</div>
                </div>
                <div class="cell-item" v-if="detail.order.orderTypeInt === 3">
                  <div>预约送达时间：</div>
                  <div>
                    {{ detail.order.deliveryInfo.bookingArriveTime || "-" }}
                  </div>
                </div>
                <div class="cell-item" v-if="detail.order.orderTypeInt === 3">
                  <div>配送信息：</div>
                  <div>
                    {{
                      `${detail.order.deliveryInfo.province}${detail.order.deliveryInfo.city}${detail.order.deliveryInfo.country}${detail.order.deliveryInfo.street}`
                    }}<br />
                    {{ detail.order.deliveryInfo.userName || "-" }}&nbsp;&nbsp;
                    {{ detail.order.deliveryInfo.phone || "-" }}
                  </div>
                </div>
                <div class="cell-item">
                  <div>用餐方式：</div>
                  <div>{{ detail.order.orderType }}</div>
                </div>
                <div class="cell-item">
                  <div>门店：</div>
                  <div>
                    {{
                      (detail.order.shopInfo &&
                        detail.order.shopInfo.shopName) ||
                      "-"
                    }}
                  </div>
                </div>
              </div>

              <div class="info-card-box fr">
                <div class="substatus">
                  订单状态：
                  <span
                    :class="orderStatusClassOptions[detail.order.orderStatus]"
                    >{{ orderStatusOptions[detail.order.orderStatus] }}</span
                  >
                </div>
                <div class="price">
                  订单金额：
                  <span class="app-text-color-primary"
                    >￥{{ detail.order.totalFee }}</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 头部 -->

        <!-- 详情区 -->

        <div class="content">
          <div class="detail-card-container">
            <div class="detail-card-box detail-card-box_l fl">
              <!--  费用明细 -->
              <el-card>
                <AppMainSubTitle title="点餐明细：" />
                <!-- <el-table
                  size="small"
                  :data="detail.order.items"
                  border
                  stripe
                  style="width: 100%"
                  empty-text="暂无数据"
                >
                  <el-table-column prop="itemName" label="名称" />
                  <el-table-column prop="specAttrRemark" label="规格" />
                  <el-table-column prop="count" label="数量" />
                  <el-table-column prop="fee" label="价格" />
                </el-table> -->
                <div class="self_table">
                  <div class="header_list">
                    <div class="th">名称</div>
                    <div class="th">规格</div>
                    <div class="th">数量</div>
                    <div class="th">价格</div>
                  </div>
                  <div v-if="detail.order.items.length > 0">
                    <div
                      v-for="(item, index) in detail.order.items"
                      :key="index"
                      class=""
                    >
                      <div class="tr">
                        <div class="td">{{ item.itemName }}</div>
                        <div class="td">{{ item.specAttrRemark }}</div>
                        <div class="td">{{ item.count }}</div>
                        <div class="td">{{ item.fee }}</div>
                      </div>
                      <div
                        v-if="
                          detail.cyItemGiftSnapshotMap != null &&
                          Object.keys(detail.cyItemGiftSnapshotMap)
                            .toString()
                            .indexOf(item.itemId) != -1
                        "
                        class="free"
                      >
                        <span>赠</span
                        >{{
                          detail.cyItemGiftSnapshotMap &&
                          returnSrting(
                            detail.cyItemGiftSnapshotMap[item.itemId]
                          )
                        }}
                      </div>
                    </div>
                    <div v-if="detail.order.teaOrPackFee > 0" class="tr">
                      <div class="td">
                        {{
                          detail.order.orderTypeInt == 1 ? "茶位费" : "打包费"
                        }}
                      </div>
                      <div class="td">-</div>
                      <div class="td">{{ detail.order.dinersNum }}</div>
                      <div class="td">
                        {{
                          detail.order.orderTypeInt == 1
                            ? detail.order.dinersNum * detail.order.teaOrPackFee
                            : detail.order.teaOrPackFee
                        }}
                      </div>
                    </div>
                     <div v-if="detail.order.packFeeDelivery > 0 && detail.order.orderTypeInt == 3" class="tr">
                      <div class="td">打包费</div>
                      <div class="td">-</div>
                      <div class="td">-</div>
                      <div class="td">{{detail.order.packFeeDelivery}}</div>
                    </div>
                     <div v-if="detail.order.feeDelivery > 0 && detail.order.orderTypeInt == 3" class="tr">
                      <div class="td">配送费</div>
                      <div class="td">-</div>
                      <div class="td">-</div>
                      <div class="td">{{detail.order.feeDelivery}}</div>
                    </div>
                  </div>
                  <div v-else class="noData">暂无数据</div>
                </div>
              </el-card>

              <el-card>
                <AppMainSubTitle title="费用明细：" />
                <div class="cell-item">
                  <div>总价：</div>
                  <div>￥{{ detail.order.totalFee }}</div>
                </div>
                <div v-if="detail.order.discountFee" class="cell-item">
                  <div>优惠：</div>
                  <div>
                    <span class="app-text-color-danger"
                      >￥{{ detail.order.discountFee }}</span
                    >
                    &nbsp;&nbsp;&nbsp;{{ detail.order.discountName }}
                  </div>
                </div>
                <div class="cell-item">
                  <div>合计：</div>
                  <div>
                    ￥{{ detail.order.payFee }}&nbsp;&nbsp;&nbsp;{{
                      detail.order.payment
                    }}
                  </div>
                </div>
                <!-- <div
				  v-if="detail.order.orderStatus===9"
				  class="no-print"
				  style="text-align:center"
				>
				  <el-button size="small" round type="primary" @click="openCancelCost">取消账单</el-button>
				</div> -->
              </el-card>
            </div>

            <div class="detail-card-box detail-card-box_r fr">
              <el-card>
                <div>
                  <AppMainSubTitle title="顾客信息：" />
                  <div class="cell-item">
                    <div>顾客姓名：</div>
                    <div>
                      {{ (detail.customer && detail.customer.name) || "-" }}
                    </div>
                  </div>
                  <div class="cell-item">
                    <div>会员等级：</div>
                    <div>
                      {{
                        (detail.customer && detail.customer.memberInfo) || "-"
                      }}
                    </div>
                  </div>
                  <div class="cell-item">
                    <div>手机号码：</div>
                    <div>
                      {{ (detail.customer && detail.customer.phone) || "-" }}
                    </div>
                  </div>
                </div>
              </el-card>
              <el-card
                v-if="detail.order.orderStatus === 9 && detail.refundResult"
              >
                <AppMainSubTitle title="退款明细：" />
                <div class="cell-item">
                  <div>退款时间：</div>
                  <div>{{ detail.refundResult.time }}</div>
                </div>
                <div class="cell-item">
                  <div>退款状态：</div>
                  <div>{{ detail.refundResult.status }}</div>
                </div>
                <div class="cell-item">
                  <div>退款备注：</div>
                  <div>{{ detail.refundResult.remark }}</div>
                </div>
                <div class="cell-item">
                  <div>退款金额：</div>
                  <div>
                    ￥{{ detail.order.payFee }}
                    <el-button
                      v-if="detail.refundResult.refundNo"
                      size="small"
                      type="text"
                      round
                      style="padding: 0"
                      @click="
                        openRefundRecordDetail(detail.refundResult.refundNo)
                      "
                      >详情</el-button
                    >
                  </div>
                </div>
              </el-card>
            </div>
          </div>
        </div>

        <!-- 弹框 -->
        <DialogRefundCodeOrder ref="refundOrder" />
      </div>
    </el-collapse-transition>

    <!-- 退款详情 -->
    <el-collapse-transition />
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import {
  getOrderDetail,
  printOrderTicket,
  updateDeliveryFinish,
} from "../../api/record";
import DialogRefundCodeOrder from "./DialogRefundCodeOrder";
export default {
  components: {
    DialogRefundCodeOrder,
  },
  data() {
    return {
      // 配置
      orderStatusOptions: {
        1: "待付款",
        2: "待付款",
        4: "已取消",
        5: "已取消",
        3: "已完成",
        9: "已退款",
        10: "待配送",
      },
      orderStatusClassOptions: {
        3: "app-text-color-success",
        9: "app-text-color-danger",
        1: "app-text-color-primary",
        2: "app-text-color-primary",
        4: "app-text-color-primary",
        5: "app-text-color-primary",
        10: "app-text-color-primary",
      },
      // 状态
      isShowRefundDetail: false,
      loading: false,
      // 数据
      orderNo: "",
      detail: "",
      giftList: [],
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {},
  mounted() {},
  methods: {
    /**
     *  获取数据
     */
    // 打开页面
    open({ orderNo }) {
      this.detail = "";
      this.orderNo = orderNo;
      this.initData();
      return new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
    },

    // 获取详情
    initData() {
      this.loading = true;
      getOrderDetail({ orderNo: this.orderNo })
        .then((res) => {
          this.detail = res.data;
        })
        .catch((err) => {})
        .finally(() => {
          this.loading = false;
        });
    },
    returnSrting(arr) {
      if (!arr || arr == null) return;
      let Str = "";
      arr.forEach((ele, index) => {
        Str += `${ele.productName}${ele.num}份${
          arr.length - 1 == index ? "" : ","
        }`;
      });
      return Str;
    },

    /**
     * 按钮组
     */
    // 返回
    back() {
      const queryFrom = ["invoice", "cancelTable"];
      if (
        queryFrom.indexOf(this.$route.query.from) > -1 &&
        this.$route.query.orderNo
      )
        return window.close();
      this.resolve && this.resolve();
    },

    // 打开退款
    openRefundOrder() {
      this.$refs.refundOrder.open(this.detail).then((res) => {
        this.initData();
      });
    },

    // 打开退款详情
    openRefundRecordDetail(refundNo) {
      this.isShowRefundDetail = true;
      this.$refs.refundRecordDetail.fetchData(refundNo).then((res) => {
        this.isShowRefundDetail = false;
      });
    },

    // 打印
    // print() {
    //   this.$print(this.$refs.printWcYOrderDetail);
    // },

    // 云打印、
    printTicket() {
      const params = {};
      params.orderNo = this.detail.order.orderNo;
      this.loading = true;
      printOrderTicket(params)
        .then((res) => {
          this.$notify({
            title: "成功",
            message: "请求打印小票成功",
            type: "success",
            duration: 2000,
            offset: 40,
          });
        })
        .catch((err) => {})
        .finally(() => {
          this.loading = false;
        });
    },
    confirmDelivery() {
      this.$confirm("是否确认已将此订单送达？", "提示", {
        confirmButtonText: "确认送达",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
        let { orderNo } = this.detail.order;
        updateDeliveryFinish({ orderNo }).then((res) => {
          if (res.code == 0) {
            this.$message.success("确认送达成功");
            this.initData();
          }
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.self_table {
  width: 100%;
  // border: 1px solid #dfe6ec;
  .header_list {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    > :not(:first-child) {
      border-left: none !important;
    }
  }
  .tr {
    display: flex;
    > :not(:first-child) {
      border-left: none !important;
    }
    .td {
      border-top: none !important;
    }
  }
  .th,
  .td {
    font-size: 14px;
    width: 25%;
    padding: 8px 10px;
    border: 1px solid #dfe6ec;
    word-break: break-all;
  }
  .free {
    padding: 10px;
    font-size: 14px;
    span {
      background: #ffb72f;
      padding: 5px;
      color: #fff;
      border-radius: 2px;
      margin-right: 10px;
    }
    border: 1px solid #dfe6ec;
    border-top: none !important;
  }
  .noData {
    border: 1px solid #dfe6ec;
    font-size: 14px;
    min-height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.order-detail {
  /**列表容器 */
  .cell-item {
    width: 100%;
    display: flex;
    font-size: 14px;
    line-height: 28px;
    > div:first-child {
      // flex: 0 0 80px;
      min-width: 80px;
      margin-right: 10px;
      color: #606266;
      font-weight: bold;
      text-align: right;
    }
    > div:last-child {
      flex: 1 1 auto;
      color: #303133;
    }
  }

  /* 内容 */
  .content {
    margin-top: 10px;
  }

  /* 订单 */
  .info-card-box {
    overflow: hidden;
    width: 33.33%;
    padding-right: 10px;
    .substatus,
    .price {
      margin-top: 20px;
      font-weight: bold;
      font-size: 18px;
      text-align: right;
    }
  }

  /* 订单详情 */
  .detail-card-container {
    .detail-card-box {
      width: 50%;
    }
    .detail-card-box_l {
      padding-right: 5px;
    }
    .detail-card-box_r {
      padding-left: 5px;
    }
    .el-card {
      margin-bottom: 10px;
    }
  }
}
</style>
